
function goodsDetails(){
    /**
     * 头部导航栏
     */ 
    var postTop = {
        methods: {
            returnPage: function(){
                var d = document;
                var goodsDetailsModule = d.querySelector('.goods-details-module');
                switchGoodsDetailsFn(false, {
                    node: goodsDetailsModule,
                    className: 'goods-details-module-js'
                });
                
            },
             // 购物车
             catPost: function(){
                var d = document,
                    cat = d.querySelector('.cat-module');
                cat.classList.add('cat-module-js');
            }
        },
        template: `
            <div class="post-top">
                <div class="return" @click="returnPage"></div>
                <div class="post-top-right">
                    <span class="iconfont icon-gouwuche" @click="catPost"></span>
                    <span></span>
                </div>
            </div>
                `
    };

    /**
     * 商品介绍
    */
    var goodsNews = {
        props: ['setGoodsName'],
        // computed: {
        //     setGoodsName1: function(){
        //         return this.setGoodsName;
        //     }
        // },
        template: `
                <div class="goods-news">
                    <h3>{{ setGoodsName.gname }}</h3>
                    <div class="goods-news-con">
                        <div class="goods-news-left">
                            <p><span>11920</span><span>119.20</span><span>{{ setGoodsName.price }}</span></p>
                            <span>上架时间: 2019.11.7</span>
                        </div>
                        <div class="goods-news-right">
                            <span></span>
                            <span>打折提醒</span>
                        </div>
                    </div>
                </div>
                `
    };


    /**
     * 商品详情页脚
    */
    var goodsFooter = {
        props: {setGoodsDetails: Object},
        data: function(){
            return {
                setGoods: {}
            }
        },
        watch: {
            setGoodsDetails: function(newVal){
                this.setGoods = newVal;
            }
        },
        methods: {
            buy: function(){
                var node = document.querySelector('.pay-module');
                //console.log(node)
                switchGoodsDetailsFn(true, {
                    node: node,
                    className: 'pay-module-js'
                });
                // 
                this.$emit('get-details-pay', true);
            },
            addCat: function(){
                //console.log(this.setGoods)
                this.$emit('get-add-cat', this.setGoods);
            }
        },
        template: `
                <div class="goods-footer">
                    <div class="goods-give"><a href="javascript:;">赠送</a></div>
                    <div class="goods-cart"><a href="javascript:;" @click="addCat">加入购物车</a></div>
                    <div class="goods-buy"><a href="javascript:;" @click="buy">立即购买</a></div>
                </div>
                `
    };





    // 页面整体
    var goodsDetailscom = {
        props: {setGoodsDetails: Object, setGoods: Array},
        data: function(){
            return {
                // goodsDetailsStyle: {
                    
                // }
                //setGoodsName: ''
            }
        },
        computed: {
            goodsDetailsStyle: function(){
                return {
                    backgroundImage: 'url('+ this.setGoodsDetails.img +')',
                    backgroundSize: 'cover',
                    backgroundPosition: 'center top'
                }
            },
            setGoodsName: function(){
                //return {gname: this.setGoodsDetails.gname, price: this.setGoodsDetails.price}
                return this.setGoodsDetails;
            }
        },
        methods: {
            getDetailsPay: function(data){
                if(data){
                    //console.log(this.setGoodsDetails)
                    this.$emit('get-details-pay', this.setGoodsDetails);
                    
                }
            },
            getAddCat: function(data){
                //console.log(data)
                //console.log(this.setGoodsDetails)
                //if(data){
                    this.$emit('get-add-cat', data);
                //}
                
            }
        },
        components: {
            'post-top': postTop,
            'goods-news': goodsNews,
            'goods-footer': goodsFooter
        },
        template: `
            <div class="goods-details-module" :style="goodsDetailsStyle">
                <post-top></post-top>
                <goods-news v-bind:set-goods-name="setGoodsName"></goods-news>
                <goods-footer v-on:get-details-pay="getDetailsPay" v-on:get-add-cat="getAddCat" v-bind:set-goods-details="setGoodsDetails"></goods-footer>
            </div>
                `
    };

    return goodsDetailscom;
}


